<template>
  <div class="buttonBox cantSelect pointer roundy-10" :class="setStyle()">
    {{ title }}
  </div>
</template>

<script>
export default {
  name: 'LoginButton',
  props:{
    title:{
      type: String,
      default: '',
    },
    type:{
      type: Number,
      default: 0,
    },
    canClick:{
      type: Boolean,
      default: true,
    },
  },
  methods:{
    setStyle(){
      if(!this.canClick)
        return 'disabled'

      switch (this.type) {
        case '0':
          return 'buttonBox'
        case '1':
          return 'buttonBox-1'
        case '2':
          return 'buttonBox-2'
        case '3':
          return 'buttonBox-3'
        default:
          return 'buttonBox'
      }
    }
  }
}
</script>

<style scoped>
.buttonBox {
  display: inline-block;
  height: 50px;
  width: 120px;
  background-color: rgb(56, 148, 252);
  color: white;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
}
.buttonBox:hover {
  transition: all 0.5s;
  background-color: rgb(43, 117, 201);
}
.buttonBox:active {
  transition: all 0.5s;
  background-color: rgb(87, 162, 248);
}
.buttonBox-1 {
  display: inline-block;
  height: 50px;
  width: 120px;
  background-color: rgb(252, 174, 56);
  color: white;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
}
.buttonBox-1:hover {
  transition: all 0.5s;
  background-color: rgb(230, 153, 39);
}
.buttonBox-1:active {
  transition: all 0.5s;
  background-color: rgb(255, 188, 88);
}
.buttonBox-2 {
  display: inline-block;
  height: 50px;
  width: 120px;
  background-color: rgb(43, 187, 86);
  color: white;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
}
.buttonBox-2:hover {
  transition: all 0.5s;
  background-color: rgb(22, 161, 64);
}
.buttonBox-2:active {
  transition: all 0.5s;
  background-color: rgb(27, 226, 87);
}
.buttonBox-3 {
  display: inline-block;
  height: 50px;
  width: 120px;
  background-color: rgb(189, 76, 48);
  color: white;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
}
.buttonBox-3:hover {
  transition: all 0.5s;
  background-color: rgb(165, 60, 28);
}
.buttonBox-3:active {
  transition: all 0.5s;
  background-color: rgb(226, 73, 34);
}

.disabled {
  transition: all 0.5s;
  background-color: rgb(55, 94, 128);
}
</style>
